<template>
  <div class="c-p15">
    <u-tabs-swiper
      ref="uTabs"
      :list="selectList"
      :current="current"
      active-color="#F3651F"
      bar-width="120"
      :is-scroll="false"
      @change="tabsChange"
    ></u-tabs-swiper>
    <view v-if="list.length > 0">
      <view class="mt15" v-for="item in list" :key="item.id">
        <quanItem @ling="ling" :item="item" :type="'use'" :index="search.type"></quanItem>
      </view>
    </view>
    <view class="c-mt100" v-else>
      <u-empty text="尚无优惠券" mode="list"></u-empty>
    </view>
  </div>
</template>
<script>
  import quan from '@/services/youhuiquan'
  import quanItem from '@/commponents/youhuiquan/index'

  export default {
    components: {quanItem},
    data() {
      return {
        list: [],
        current: 0,
        selectList: [
          {
            name: '未使用'
          },
          {
            name: '已使用'
          },
          {
            name: '已过期'
          }
        ],
        search: {
          page: 1,
          limit: 10,
          type: 1
        }
      }
    },
    onShow() {
      this.getlist()
    },
    methods: {
      getlist(type) {
        quan.user(this.search).then(data => {
          if (!type) this.list = []
          this.list.push(...data.list)
          this.list.forEach((item, index) => {
            this.list[index].wNum = item.productList.length * 40
            this.list[index].scrollCol = item.productList.length
          })
        })
      },
      tabsChange(index) {
        this.current = index
        this.$set(this.search, 'type', ++index)
        this.$set(this.search, 'page', 1)
        this.$set(this.search, 'limit', 10)
        this.getlist()
      },
      ling() {
        wx.switchTab({
          url: `/pages/index/index`
        })
      }
    },
    onReachBottom() {
      this.search.page++
      this.getlist(true)
    }
  }
</script>
<style lang="scss" scoped>
  .c-flex {
    display: flex;
  }
  .c-w70 {
    width: 70%;
  }
  .c-flex-between {
    justify-content: space-between;
  }
  .c-p15 {
    padding: 30rpx;
  }
  .goodsBox {
    width: 100%;
  }
  .c-mr10 {
    margin-right: 10rpx;
  }
  .mt15 {
    margin-top: 15px;
  }
  .c-fs-20 {
    font-size: 20rpx;
  }
  .xiao {
    width: 100%;
    height: 200rpx;
  }
  .lingqu {
    right: 10px;
    top: 35px;
    button {
      width: 153rpx;
      font-size: 12px;
      padding: 0;
      margin: 0;
      border: 0;
      color: #fff;
      background: #ff6a21;
      border-radius: 80px;
    }
  }
  .youBox {
    width: 80%;
    margin: 70rpx auto;
  }
  .da {
    width: 100%;
    height: 390rpx;
  }
  .xiaoBox {
    top: 0px;
    width: 100%;
    height: 200rpx;
    line-height: 170rpx;
    padding-left: 22px;
    box-sizing: border-box;
    padding-right: 10px;
  }
  .daBox {
    top: 0px;
    width: 100%;
    background: gray;
    height: 390rpx;
    padding-left: 10px;
    box-sizing: border-box;
    padding-right: 10px;
  }
  .dayou {
    position: absolute;
    top: 20rpx;
    left: 20rpx;
    height: 345rpx;
    width: 94%;
  }
  .quanbox {
    width: 258rpx;
    height: 60rpx;
    text-align: center;
    background: #eee;
    line-height: 60rpx;
    font-size: 13px;
    border-radius: 3px;
  }
  .scroll {
    width: 100%;
    overflow: auto;
  }
  .c-w22 {
    width: 22%;
  }
</style>
